<template>
  <el-dropdown trigger="click">
    <div class="lang_select_wrap" :active="isLoignColor">{{ langMapping[lang] }}</div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in selectData" :key="item.value" @click="changeLang(item.value)">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { ref, inject } from "vue";
import { useI18n } from "vue-i18n";
const { locale: i18nLanguage } = useI18n();
const props = defineProps<{
  multiLanguages: any;
  isLoignColor: boolean;
}>();
/**选择框数据 */
const selectData = [
  { label: "中文 (CN)", value: "zh_CN" },
  { label: "English (US)", value: "en_US" },
  { label: "Português (Brasil)", value: "pt_BR" },
];
/**语言映射 */
const langMapping: { [key: string]: string } = {
  en_US: "English (US)",
  zh_CN: "中文 (CN)",
  pt_BR: "Português (Brasil)",
};
/**选择的语言 */
const lang = ref(localStorage.getItem("language") || "zh_CN");
const changeEleLang: any = inject("changeEleLang")
/**选择事件 */
const changeLang = (value: string) => {
  lang.value = value;
  i18nLanguage.value = value;
  localStorage.setItem("language", value);
  changeEleLang(value)
};
</script>
<style scoped lang="less">
.lang_select_wrap {
  cursor: pointer;
  &[active="true"] {
    &:hover {
      color: #c3c3c3;
    }
  }
  &[active="false"] {
    &:hover {
      color: #505050;
    }
  }
}
</style>
